<template>
    <div class="comprehensiveTabel">
        <GeneralTabel 
            v-loading="isLoading"
            v-model:formArr="formArr" 
            v-model:formData="formData" 
            v-model:isFoldNum="isFoldNum" 
            @tabelSearch="tabelSearch" 
            v-model:buttonArr="buttonArr" 
            v-model:tabArr="tabArr" 
            v-model:tabActiveName="tabActiveName" 
            @tabChange="tabChange" 
            v-model:tableObj="tableObj" 
            
        />
        <!-- 跳转页面 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="90%"
            center
            align-center
            destroy-on-close
            draggable
            overflow
            :close-on-click-modal="false"
            class="my-dialog"
        >
            <!-- <span>This is a message</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        Confirm
                    </el-button>
                </div>
            </template> -->
            <component :is="dialogComponent" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import {  } from '@/apis'
    import { isPhone } from '@/utils/utils'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage, ElMessageBox  } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        Plus,
        Delete,
        Edit
    } from '@element-plus/icons-vue'
    import GeneralTabel from '@/components/generalTabel/GeneralTabel.vue'
    import DemoScroll from '@/views/demoScroll/DemoScroll.vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
	const avatarImage = new URL('@/assets/img//404.png', import.meta.url).href
    // const avatarImage: Raw<any[]> = markRaw([new URL('@/assets/img/avatar/avatar.png', import.meta.url).href])
    const dialogVisible: Ref<boolean> = ref(false) //
    const dialogComponent: Ref<any> = ref('') //
    const dialogTitle: Ref<string> = ref('编辑') //
    const isLoading: Ref<boolean> = ref(false) //
    const isFoldNum: Ref<number> = ref(20) //第几个开始折叠，可以不用给值，有默认值
    const formArr: Ref<any[]> = ref([
        {
            fieldName: 'account', //字段
            fieldText: '账号', //字段文字
            fieldType: 'input', //类型 input select date cascader
            fieldDisabled: false, //是否禁用
            fieldRules: [ //规则
                { 
                    required: true, 
                    message: '请输入账号！', 
                    trigger: 'blur' 
                }
            ],
            // input输入框
            inputType: 'text', //类型 number
            inputMaxLength: '', //最大输入长度 数字
            // select选项框
            selectmultiple: false, //select是否多选
            selectMultipleLimit: 0, //multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制
            selectOptions: [ //select选项
                // {
                //     label: '',
                //     value: '',
                //     disabled: false,
                // }
            ],
            // date选项框
            dateValueFormat: 'YYYY-MM-DD', //绑定值的格式YYYY-MM-DD
            dateType: 'date', //类型 date year month daterange monthrange yearrange
            dateDefaultValue: '', //默认值 new Date(2010, 9, 1)
            // cascader选项框
            cascaderOptions: [ //cascader选项
                // {
                //     value: 'guide',
                //     label: 'Guide',
                //     children: [
                //         {
                //             value: 'disciplines',
                //             label: 'Disciplines',
                //             children: [
                //                 {
                //                     value: 'consistency',
                //                     label: 'Consistency',
                //                 },
                //                 {
                //                     value: 'controllability',
                //                     label: 'Controllability',
                //                 },
                //             ],
                //         },
                //         {
                //             value: 'navigation',
                //             label: 'Navigation',
                //             children: [
                //                 {
                //                     value: 'side nav',
                //                     label: 'Side Navigation',
                //                 },
                //                 {
                //                     value: 'top nav',
                //                     label: 'Top Navigation',
                //                 },
                //             ],
                //         },
                //     ],
                // },
                // {
                //     value: 'resource',
                //     label: 'Resource',
                //     disabled: true,
                //     children: [
                //         {
                //             value: 'axure',
                //             label: 'Axure Components',
                //         },
                //         {
                //             value: 'docs',
                //             label: 'Design Documentation',
                //         },
                //     ],
                // },
            ],
            cascaderProps: { //cascader配置
                expandTrigger: 'hover',
                // multiple: true, //开启多选模式
                // checkStrictly: false, //是否严格的遵守父子节点不互相关联
                // lazy: true, //是否动态加载子节点，需与 lazyLoad 方法结合使用
                // lazyLoad(node, resolve) { //加载动态数据的方法，仅在 lazy 为 true 时有效
                //     const { level } = node
                //     setTimeout(() => {
                //         const nodes = Array.from({ length: level + 1 }).map((item, index) => ({
                //             value: `${level}- ${index}`,
                //             label: `Option - ${level}- ${index}`,
                //             leaf: level >= 2,
                //         }))
                //         // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
                //         resolve(nodes)
                //     }, 1000)
                // },
            },
            cascaderShowAllLevels: true, //是否显示完整的路径，将其赋值为 false 则仅显示最后一级
            cascaderCollapseTags: true, //多选模式下是否折叠Tag
            cascaderCollapseTagsTooltip: true, //当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
            cascaderMaxCollapseTags: 1, //需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。
            cascaderFilterable: true, //该选项是否可以被搜索
        },
        {
            fieldName: 'gender', //字段
            fieldValue: '', //字段默认值 如果是多选就是[]
            fieldText: '性别', //字段文字
            fieldType: 'select', //类型 input select date cascader
            fieldDisabled: false, //是否禁用
            fieldRules: [ //规则
                { 
                    required: true, 
                    message: '请选择性别！', 
                    trigger: 'blur' 
                }
            ],
            // input输入框
            inputType: '', //类型 number
            inputMaxLength: '', //最大输入长度 数字
            // select选项框
            selectmultiple: false, //select是否多选
            selectMultipleLimit: 0, //multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制
            selectOptions: [ //select选项
                {
                    label: '男',
                    value: '男',
                    disabled: false,
                },
                {
                    label: '女',
                    value: '女',
                    disabled: false,
                },
            ],
            // date选项框
            dateValueFormat: 'YYYY-MM-DD', //绑定值的格式YYYY-MM-DD
            dateType: 'date', //类型 date year month daterange monthrange yearrange
            dateDefaultValue: '', //默认值 new Date(2010, 9, 1)
            // cascader选项框
            cascaderOptions: [ //cascader选项
                
            ],
            cascaderProps: { //cascader配置
                expandTrigger: 'hover',
                // multiple: true, //开启多选模式
                // checkStrictly: false, //是否严格的遵守父子节点不互相关联
                // lazy: true, //是否动态加载子节点，需与 lazyLoad 方法结合使用
                // lazyLoad(node, resolve) { //加载动态数据的方法，仅在 lazy 为 true 时有效
                //     const { level } = node
                //     setTimeout(() => {
                //         const nodes = Array.from({ length: level + 1 }).map((item, index) => ({
                //             value: `${level}- ${index}`,
                //             label: `Option - ${level}- ${index}`,
                //             leaf: level >= 2,
                //         }))
                //         // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
                //         resolve(nodes)
                //     }, 1000)
                // },
            },
            cascaderShowAllLevels: true, //是否显示完整的路径，将其赋值为 false 则仅显示最后一级
            cascaderCollapseTags: true, //多选模式下是否折叠Tag
            cascaderCollapseTagsTooltip: true, //当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
            cascaderMaxCollapseTags: 1, //需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。
            cascaderFilterable: true, //该选项是否可以被搜索
        },
        {
            fieldName: 'date', //字段
            fieldValue: '', //字段默认值  date year month是 '' daterange monthrange yearrange是[]
            fieldText: '日期', //字段文字
            fieldType: 'date', //类型 input select date cascader
            fieldDisabled: false, //是否禁用
            fieldRules: [ //规则
                { 
                    required: true, 
                    message: '请选择日期！', 
                    trigger: 'blur' 
                }
            ],
            // input输入框
            inputType: '', //类型 number
            inputMaxLength: '', //最大输入长度 数字
            // select选项框
            selectmultiple: false, //select是否多选
            selectMultipleLimit: 0, //multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制
            selectOptions: [ //select选项
                
            ],
            // date选项框
            dateValueFormat: 'YYYY-MM-DD', //绑定值的格式YYYY-MM-DD
            dateType: 'date', //类型 date year month daterange monthrange yearrange
            dateDefaultValue: '', //默认值 new Date(2010, 9, 1)
            // cascader选项框
            cascaderOptions: [ //cascader选项
                
            ],
            cascaderProps: { //cascader配置
                expandTrigger: 'hover',
                // multiple: true, //开启多选模式
                // checkStrictly: false, //是否严格的遵守父子节点不互相关联
                // lazy: true, //是否动态加载子节点，需与 lazyLoad 方法结合使用
                // lazyLoad(node, resolve) { //加载动态数据的方法，仅在 lazy 为 true 时有效
                //     const { level } = node
                //     setTimeout(() => {
                //         const nodes = Array.from({ length: level + 1 }).map((item, index) => ({
                //             value: `${level}- ${index}`,
                //             label: `Option - ${level}- ${index}`,
                //             leaf: level >= 2,
                //         }))
                //         // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
                //         resolve(nodes)
                //     }, 1000)
                // },
            },
            cascaderShowAllLevels: true, //是否显示完整的路径，将其赋值为 false 则仅显示最后一级
            cascaderCollapseTags: true, //多选模式下是否折叠Tag
            cascaderCollapseTagsTooltip: true, //当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
            cascaderMaxCollapseTags: 1, //需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。
            cascaderFilterable: true, //该选项是否可以被搜索
        },
        {
            fieldName: 'city', //字段
            fieldValue: [], //字段默认值
            fieldText: '城市', //字段文字
            fieldType: 'cascader', //类型 input select date cascader
            fieldDisabled: false, //是否禁用
            fieldRules: [ //规则
                { 
                    required: true, 
                    message: '请选择城市！', 
                    trigger: 'blur' 
                }
            ],
            // input输入框
            inputType: '', //类型 number
            inputMaxLength: '', //最大输入长度 数字
            // select选项框
            selectmultiple: false, //select是否多选
            selectMultipleLimit: 0, //multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制
            selectOptions: [ //select选项
                
            ],
            // date选项框
            dateValueFormat: 'YYYY-MM-DD', //绑定值的格式YYYY-MM-DD
            dateType: 'date', //类型 date year month daterange monthrange yearrange
            dateDefaultValue: '', //默认值 new Date(2010, 9, 1)
            // cascader选项框
            cascaderOptions: [ //cascader选项
                {
                    value: 'guide',
                    label: 'Guide',
                    children: [
                        {
                            value: 'disciplines',
                            label: 'Disciplines',
                            children: [
                                {
                                    value: 'consistency',
                                    label: 'Consistency',
                                },
                                {
                                    value: 'controllability',
                                    label: 'Controllability',
                                },
                            ],
                        },
                        {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [
                                {
                                    value: 'side nav',
                                    label: 'Side Navigation',
                                },
                                {
                                    value: 'top nav',
                                    label: 'Top Navigation',
                                },
                            ],
                        },
                    ],
                },
                {
                    value: 'resource',
                    label: 'Resource',
                    disabled: true,
                    children: [
                        {
                            value: 'axure',
                            label: 'Axure Components',
                        },
                        {
                            value: 'docs',
                            label: 'Design Documentation',
                        },
                    ],
                },
            ],
            cascaderProps: { //cascader配置
                expandTrigger: 'hover',
                // multiple: true, //开启多选模式
                // checkStrictly: false, //是否严格的遵守父子节点不互相关联
                // lazy: true, //是否动态加载子节点，需与 lazyLoad 方法结合使用
                // lazyLoad(node, resolve) { //加载动态数据的方法，仅在 lazy 为 true 时有效
                //     const { level } = node
                //     setTimeout(() => {
                //         const nodes = Array.from({ length: level + 1 }).map((item, index) => ({
                //             value: `${level}- ${index}`,
                //             label: `Option - ${level}- ${index}`,
                //             leaf: level >= 2,
                //         }))
                //         // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
                //         resolve(nodes)
                //     }, 1000)
                // },
            },
            cascaderShowAllLevels: true, //是否显示完整的路径，将其赋值为 false 则仅显示最后一级
            cascaderCollapseTags: true, //多选模式下是否折叠Tag
            cascaderCollapseTagsTooltip: true, //当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
            cascaderMaxCollapseTags: 1, //需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。
            cascaderFilterable: true, //该选项是否可以被搜索
        },
        
    ])
    // formData不用给值，里面会根据formArr的值来赋值，只是用作其他查询需要值
    const formData: Ref<any> = ref({

    })
    // 根据条件查询列表
    const tabelSearch = (val) => {
        // 根据下面两个值查就行
        console.log(formData.value)
        console.log(tabActiveName.value)

    }
   
    // 删除多个表格有tableSelection
    const buttonArr: Ref<any[]> = ref([
        {
            buttonType: 'primary', //类型
            buttonPlain: false, //是否为朴素按钮
            buttonRound: false, //是否为圆角按钮
            buttonCircle: false, //是否为圆形按钮
            buttonIcon: Plus, //图标组件
            buttonDisabled: false, //按钮是否为禁用状态
            buttonLink: false, //是否为链接按钮
            buttonText: false, //是否为文字按钮
            buttonBg: false, //是否显示文字按钮背景颜色
            buttonLoading: false, //是否为加载中状态
            buttonLoadingIcon: '', //自定义加载中状态图标组件
            buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
            buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            buttonMainText: '新增', //按钮文字
            buttonClick: () => { //按钮事件
                console.log('按钮事件')
            }
        },
        {
            buttonType: 'danger', //类型
            buttonPlain: false, //是否为朴素按钮
            buttonRound: false, //是否为圆角按钮
            buttonCircle: false, //是否为圆形按钮
            buttonIcon: Delete, //图标组件
            buttonDisabled: false, //按钮是否为禁用状态
            buttonLink: false, //是否为链接按钮
            buttonText: false, //是否为文字按钮
            buttonBg: false, //是否显示文字按钮背景颜色
            buttonLoading: false, //是否为加载中状态
            buttonLoadingIcon: '', //自定义加载中状态图标组件
            buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
            buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            buttonMainText: '删除', //按钮文字
            buttonClick: () => { //按钮事件 
                console.log('按钮事件')
            }
        },
    ])
    const tabArr: Ref<any[]> = ref([
        {
            tabLabel: '第一个', //选项卡标题
            tabName: '第一个', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
            tabDisabled: false, //是否禁用
            badgeValue: 0, //显示值
            badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
            badgeIsDot: false, //是否显示小圆点。
            badgeHidden: false, //是否隐藏 Badge。
            badgeType: 'danger', //badge type.
            badgeShowZero: true, //值为零时是否显示 Badge
            badgeColor: '', //背景色
            badgeOffset: [10, 0], //badge 的偏移量
        },
        {
            tabLabel: '第二个', //选项卡标题
            tabName: '第二个', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
            tabDisabled: false, //是否禁用
            badgeValue: 0, //显示值
            badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
            badgeIsDot: false, //是否显示小圆点。
            badgeHidden: false, //是否隐藏 Badge。
            badgeType: 'danger', //badge type.
            badgeShowZero: true, //值为零时是否显示 Badge
            badgeColor: '', //背景色
            badgeOffset: [10, 0], //badge 的偏移量
        },
        
    ])
    const tabActiveName: Ref<string> = ref('')
    // 根据条件查询列表
    const tabChange = (val) => {
        // 根据下面两个值查就行
        console.log(tabActiveName.value)
        console.log(formData.value)
    }
    
    const tableObj: Ref<any[]> = ref({
        tableData: [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
                gender: '男',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
                gender: '男',

            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
                gender: '男',

            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
                gender: '男',

            },
        ],
        tableColumn: [
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '50', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'selection', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    // {
                    //     tableProp: 'gender',
                    //     tableLabel: 'Gender',
                    //     tableWidth: '300',
                    //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                    //     tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    // },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
                // tableFilters: [ //数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
                //     // { text: 'Home', value: 'Home' },
                //     // { text: 'Office', value: 'Office' },
                // ],
                // tableFilterMethod: (value, row, column) => { //数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
                //     const property = column['property']
                //     return row[property] === value
                // },
                // tableFilterPlacement: 'bottom-end', //过滤弹出框的定位'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
                // tableContentType: 'button', //column定制内容类型
                // tableContentButtons: [ // //column定制按钮
                //     {
                //         tableContentButtonType: 'primary', //按钮类型
                //         tableContentButtonPlain: false, //是否为朴素按钮
                //         tableContentButtonRound: false, //是否为圆角按钮
                //         tableContentButtonCircle: false, //是否为圆形按钮
                //         tableContentButtonIcon: Edit, //图标组件
                //         tableContentButtonDisabled: false, //按钮是否为禁用状态
                //         tableContentButtonText: false, //是否为文字按钮
                //         tableContentButtonLink: false, //是否为链接按钮
                //         tableContentButtonBg: false, //是否显示文字按钮背景颜色
                //         tableContentButtonLoading: false, //是否为加载中状态
                //         tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
                //         tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
                //         tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
                //         tableContentButtonMainText: '修改', //按钮文字
                //         tableContentButtonClick: (val) => {
                //             console.log(val)
                //         },
                //     },
                // ],
                // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
                //     return index * 2
                // },
                // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
                
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '序号', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '100', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'index', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    // {
                    //     tableProp: 'gender',
                    //     tableLabel: 'Gender',
                    //     tableWidth: '300',
                    //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                    //     tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    // },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
                // tableFilters: [ //数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
                //     // { text: 'Home', value: 'Home' },
                //     // { text: 'Office', value: 'Office' },
                // ],
                // tableFilterMethod: (value, row, column) => { //数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
                //     const property = column['property']
                //     return row[property] === value
                // },
                // tableFilterPlacement: 'bottom-end', //过滤弹出框的定位'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
                // tableContentType: 'button', //column定制内容类型
                // tableContentButtons: [ // //column定制按钮
                //     {
                //         tableContentButtonType: 'primary', //按钮类型
                //         tableContentButtonPlain: false, //是否为朴素按钮
                //         tableContentButtonRound: false, //是否为圆角按钮
                //         tableContentButtonCircle: false, //是否为圆形按钮
                //         tableContentButtonIcon: Edit, //图标组件
                //         tableContentButtonDisabled: false, //按钮是否为禁用状态
                //         tableContentButtonText: false, //是否为文字按钮
                //         tableContentButtonLink: false, //是否为链接按钮
                //         tableContentButtonBg: false, //是否显示文字按钮背景颜色
                //         tableContentButtonLoading: false, //是否为加载中状态
                //         tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
                //         tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
                //         tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
                //         tableContentButtonMainText: '修改', //按钮文字
                //         tableContentButtonClick: (val) => {
                //             console.log(val)
                //         },
                //     },
                // ],
                // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
                //     return index * 2
                // },
                // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
                
            },
            {
                tableProp: 'date', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: 'Date', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    // {
                    //     tableProp: 'gender',
                    //     tableLabel: 'Gender',
                    //     tableWidth: '300',
                    //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                    //     tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    // },
                ],
                tableSortable: true, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
                // tableFilters: [ //数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
                //     // { text: 'Home', value: 'Home' },
                //     // { text: 'Office', value: 'Office' },
                // ],
                // tableFilterMethod: (value, row, column) => { //数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
                //     const property = column['property']
                //     return row[property] === value
                // },
                // tableFilterPlacement: 'bottom-end', //过滤弹出框的定位'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
                // tableContentType: 'button', //column定制内容类型
                // tableContentButtons: [ // //column定制按钮
                //     {
                //         tableContentButtonType: 'primary', //按钮类型
                //         tableContentButtonPlain: false, //是否为朴素按钮
                //         tableContentButtonRound: false, //是否为圆角按钮
                //         tableContentButtonCircle: false, //是否为圆形按钮
                //         tableContentButtonIcon: Edit, //图标组件
                //         tableContentButtonDisabled: false, //按钮是否为禁用状态
                //         tableContentButtonText: false, //是否为文字按钮
                //         tableContentButtonLink: false, //是否为链接按钮
                //         tableContentButtonBg: false, //是否显示文字按钮背景颜色
                //         tableContentButtonLoading: false, //是否为加载中状态
                //         tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
                //         tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
                //         tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
                //         tableContentButtonMainText: '修改', //按钮文字
                //         tableContentButtonClick: (val) => {
                //             console.log(val)
                //         },
                //     },
                // ],
                // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
                //     return index * 2
                // },
                // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
                
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '多级表头', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '300', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    {
                        tableProp: 'gender',
                        tableLabel: 'Gender',
                        tableWidth: '300',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
                // tableFilters: [ //数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
                //     // { text: 'Home', value: 'Home' },
                //     // { text: 'Office', value: 'Office' },
                // ],
                // tableFilterMethod: (value, row, column) => { //数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
                //     const property = column['property']
                //     return row[property] === value
                // },
                // tableFilterPlacement: 'bottom-end', //过滤弹出框的定位'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
                // tableContentType: 'button', //column定制内容类型
                // tableContentButtons: [ // //column定制按钮
                //     {
                //         tableContentButtonType: 'primary', //按钮类型
                //         tableContentButtonPlain: false, //是否为朴素按钮
                //         tableContentButtonRound: false, //是否为圆角按钮
                //         tableContentButtonCircle: false, //是否为圆形按钮
                //         tableContentButtonIcon: Edit, //图标组件
                //         tableContentButtonDisabled: false, //按钮是否为禁用状态
                //         tableContentButtonText: false, //是否为文字按钮
                //         tableContentButtonLink: false, //是否为链接按钮
                //         tableContentButtonBg: false, //是否显示文字按钮背景颜色
                //         tableContentButtonLoading: false, //是否为加载中状态
                //         tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
                //         tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
                //         tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
                //         tableContentButtonMainText: '修改', //按钮文字
                //         tableContentButtonClick: (val) => {
                //             console.log(val)
                //         },
                //     },
                // ],
                // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
                //     return index * 2
                // },
                // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
            },
            {
                tableProp: 'name', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: 'Name', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    // {
                    //     tableProp: 'gender',
                    //     tableLabel: 'Gender',
                    //     tableWidth: '300',
                    //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                    //     tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    // },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
                // tableFilters: [ //数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
                //     // { text: 'Home', value: 'Home' },
                //     // { text: 'Office', value: 'Office' },
                // ],
                // tableFilterMethod: (value, row, column) => { //数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
                //     const property = column['property']
                //     return row[property] === value
                // },
                // tableFilterPlacement: 'bottom-end', //过滤弹出框的定位'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
                // tableContentType: 'button', //column定制内容类型
                // tableContentButtons: [ // //column定制按钮
                //     {
                //         tableContentButtonType: 'primary', //按钮类型
                //         tableContentButtonPlain: false, //是否为朴素按钮
                //         tableContentButtonRound: false, //是否为圆角按钮
                //         tableContentButtonCircle: false, //是否为圆形按钮
                //         tableContentButtonIcon: Edit, //图标组件
                //         tableContentButtonDisabled: false, //按钮是否为禁用状态
                //         tableContentButtonText: false, //是否为文字按钮
                //         tableContentButtonLink: false, //是否为链接按钮
                //         tableContentButtonBg: false, //是否显示文字按钮背景颜色
                //         tableContentButtonLoading: false, //是否为加载中状态
                //         tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
                //         tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
                //         tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
                //         tableContentButtonMainText: '修改', //按钮文字
                //         tableContentButtonClick: (val) => {
                //             console.log(val)
                //         },
                //     },
                // ],
                // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
                //     return index * 2
                // },
                // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
            },
            {
                tableProp: 'address', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: 'Address', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    // {
                    //     tableProp: 'gender',
                    //     tableLabel: 'Gender',
                    //     tableWidth: '300',
                    //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                    //     tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    // },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
                // tableFilters: [ //数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
                //     // { text: 'Home', value: 'Home' },
                //     // { text: 'Office', value: 'Office' },
                // ],
                // tableFilterMethod: (value, row, column) => { //数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
                //     const property = column['property']
                //     return row[property] === value
                // },
                // tableFilterPlacement: 'bottom-end', //过滤弹出框的定位'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
                // tableContentType: 'button', //column定制内容类型
                // tableContentButtons: [ // //column定制按钮
                //     {
                //         tableContentButtonType: 'primary', //按钮类型
                //         tableContentButtonPlain: false, //是否为朴素按钮
                //         tableContentButtonRound: false, //是否为圆角按钮
                //         tableContentButtonCircle: false, //是否为圆形按钮
                //         tableContentButtonIcon: Edit, //图标组件
                //         tableContentButtonDisabled: false, //按钮是否为禁用状态
                //         tableContentButtonText: false, //是否为文字按钮
                //         tableContentButtonLink: false, //是否为链接按钮
                //         tableContentButtonBg: false, //是否显示文字按钮背景颜色
                //         tableContentButtonLoading: false, //是否为加载中状态
                //         tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
                //         tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
                //         tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
                //         tableContentButtonMainText: '修改', //按钮文字
                //         tableContentButtonClick: (val) => {
                //             console.log(val)
                //         },
                //     },
                // ],
                // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
                //     return index * 2
                // },
                // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '操作', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '300', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: 'right', //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    // {
                    //     tableProp: 'gender',
                    //     tableLabel: 'Gender',
                    //     tableWidth: '300',
                    //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                    //     tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    // },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
                // tableFilters: [ //数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
                //     // { text: 'Home', value: 'Home' },
                //     // { text: 'Office', value: 'Office' },
                // ],
                // tableFilterMethod: (value, row, column) => { //数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
                //     const property = column['property']
                //     return row[property] === value
                // },
                // tableFilterPlacement: 'bottom-end', //过滤弹出框的定位'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
                tableContentType: 'button', //column定制内容类型
                tableContentButtons: [ // //column定制按钮
                    {
                        tableContentButtonType: 'primary', //按钮类型
                        tableContentButtonPlain: false, //是否为朴素按钮
                        tableContentButtonRound: false, //是否为圆角按钮
                        tableContentButtonCircle: false, //是否为圆形按钮
                        tableContentButtonIcon: Edit, //图标组件
                        tableContentButtonDisabled: false, //按钮是否为禁用状态
                        tableContentButtonText: false, //是否为文字按钮
                        tableContentButtonLink: false, //是否为链接按钮
                        tableContentButtonBg: false, //是否显示文字按钮背景颜色
                        tableContentButtonLoading: false, //是否为加载中状态
                        tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
                        tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
                        tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
                        tableContentButtonMainText: '修改', //按钮文字
                        tableContentButtonClick: (val) => {
                            console.log(val)
                            dialogVisible.value = true
                            dialogComponent.value = DemoScroll
                        },
                    },
                    {
                        tableContentButtonType: 'danger', //按钮类型
                        tableContentButtonPlain: false, //是否为朴素按钮
                        tableContentButtonRound: false, //是否为圆角按钮
                        tableContentButtonCircle: false, //是否为圆形按钮
                        tableContentButtonIcon: Delete, //图标组件
                        tableContentButtonDisabled: false, //按钮是否为禁用状态
                        tableContentButtonText: false, //是否为文字按钮
                        tableContentButtonLink: false, //是否为链接按钮
                        tableContentButtonBg: false, //是否显示文字按钮背景颜色
                        tableContentButtonLoading: false, //是否为加载中状态
                        tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
                        tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
                        tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
                        tableContentButtonMainText: '删除', //按钮文字
                        tableContentButtonClick: (val) => {
                            console.log(val)
                            ElMessageBox.confirm(
                                '请问是否确认删除?',
                                '提示',
                                {
                                    confirmButtonText: '确认',
                                    cancelButtonText: '取消',
                                    type: 'warning',
                                }
                            ).then(() => {
                                ElMessage({
                                    type: 'success',
                                    message: '确认删除',
                                })
                            }).catch(() => {
                                ElMessage({
                                    type: 'info',
                                    message: '取消删除',
                                })
                            })
                        },
                    },
                ],
                // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
                //     return index * 2
                // },
                // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
                
               
            },
        ],
        tableBorder: false, //是否带有纵向边框
        tableStripe: false, //是否为斑马纹 table
        tableRowClassName: ({ //自定义每一行的样式
            row,
            rowIndex,
        }) => {
            // if (rowIndex === 1) {
            //     return 'warning-row'
            // } else if (rowIndex === 3) {
            //     return 'success-row'
            // }
            return ''
        },
        tableHeight: '500', //table 的高度。 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
        tableMaxHeight: '500', //table 的最大高度。 合法的值为数字或者单位为 px 的高度。
        tableHighlightCurrentRow: false, //是否要高亮当前行
        tableFit: true, //列的宽度是否自撑开
        tableShowHeader: true, //是否显示表头
        tableCurrentChange: (currentRow, oldCurrentRow) => { //当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
            console.log(currentRow)
            console.log(oldCurrentRow)
            console.log()
        },
        tableRowDblclick: (row , column, event) => { //当某一行被双击时会触发该事件
            console.log(row)
            console.log(column)
            console.log(event)
        },
        tableDefaultSort: '', //默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序，例子{ prop: 'date', order: 'descending' }
        tableFormatter: (row, column) => { //它用于格式化指定列的值
            // return row.address
        },
        tableRowKey: '', //行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
        tableDefaultExpandAll: false, //是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
        tableShowSummary: false, //是否在表尾显示合计行
        // tableSummaryMethod: (val) => { //自定义的合计计算方法
        //     return ''
        // },
        // tableSpanMethod: ({ //合并行或列的计算方法
        //     row,
        //     column,
        //     rowIndex,
        //     columnIndex,
        // }) => {
        //     if (rowIndex % 2 === 0) {
        //         if (columnIndex === 0) {
        //             return [1, 2]
        //         } else if (columnIndex === 1) {
        //             return [0, 0]
        //         }
        //     }
        // },
        tableLayout: 'fixed', //设置表格单元、行和列的布局方式
        tableSelectionChange: (newSelection) => { //当选择项发生变化时会触发该事件
            tableObj.tableSelection = newSelection
            console.log(tableObj.tableSelection)

        },
        tableSelection: [], //选择项的值
    })
</script>

<style lang="scss" scoped>
    .comprehensiveTabel {
        width: 100%;
        height: 100%;
        background: #fff;
        box-sizing: border-box;
        padding: 20px;
    }
    :deep(.my-dialog) {
        height: 90%; 
        overflow: hidden;
        .el-dialog__body {
            height: 95%; 
            // overflow-x: hidden;
            // overflow-y: scroll;
        }
    }
    
</style>